<html>
<head>
<#include "/freemarker/fw/meta_top.ftl">
    <meta property="qc:admins" content="045130142155655"/>
    <title>发现 <#if curTag??>${curTag.name}</#if></title>
    <#include "/freemarker/fw/load_static.ftl">
        <script>
            var _deleteBook = function(el, id){
                console.log($(el).closest("li.book-item"));
                $(el).closest("li.book-item").remove()
            }
        </script>
</head>
<body>
<#include "/freemarker/fw/navbar_top.ftl">
    <div class="container" id="main">
        <div class="row">
            <div class="col-sm-6">
                <div id="book_filter" class="row">
                    <div class="conditions col-sm-12">
                        <#list tags as tag>
                            <span class="tag label label-primary <#if tag.equals(curTag)>active</#if>" data-role="tag" data-id="${tag.id}">
                                <a href="?tag=${tag.name}&recent=<#if recent??>${recent}</#if>" class="button">${tag.name}</a>
                            </span>
                        </#list>
                    </div>
                    <#--<div class="filter-input-box">-->
                        <#--<input name="filter" type="text" class="filter-input" placeholder="输入">-->
                    <#--</div>-->
                    <div class="col-sm-12">
                        <div class="book-sort col-lg-2">
                            <span class="current-sort">排序</span>
                            <ul class="list-unstyled">
                                <li data-value="HOUR">一小时热榜</li>
                                <li data-value="DAY">一天热榜</li>
                                <li data-value="WEEK">一周热榜</li>
                                <li data-value="MONTH">一月热榜</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <script>
                    $(document).ready(function(){
                        $(".filter-input").on("keydown", function(e){
                            if(e.keyCode == 13 && $(e.target).val()){
                                var $tag = $("<span class='tag'>" + $(e.target).val().trim() + "</span>");
                                $("#book_filter .conditions").append($tag);
                                $(e.target).val("");
                            }
                        });
                        $(".conditions")
                                .on("mouseenter", ".tag", function(e){
//                                    $(e.target).addClass("able-delete");
                                }).on("mouseleave", ".tag", function(e){
//                                    $(e.target).removeClass("able-delete");
                                }).on("click", ".tag.able-delete", function(e){
//                                    $(e.target).remove();
                                });
                        $(".book-sort li").on("click", function(e){
                            $(".book-sort .current-sort").text($(e.target).text());
                            $(".book-sort .current-sort").trigger("change", $(e.target).data("value"));
                        });
                        $(".book-sort .current-sort").on("change", function(e, value){
                            window.location.href = window.location.pathname + "?tag=<#if curTag??>${curTag.name}</#if>&recent=" + value;
                        });
                    });
                </script>
                <#include "/book/book_list.ftl">
            </div>
            <#include "/book/book_preview.ftl">
        </div>
    </div>
</body>
</html>